<template>
  <div class="mod-jmcourseorg">
    <el-row>
    专业： <el-select v-model="org" placeholder="请选择" @change="fillTransfer()">
      <el-option v-for="item in orgList" :key="item.orgNo" :label="item.orgName" :value="item.orgNo">
      </el-option>
    </el-select>

    课程：<el-select v-model="module" placeholder="请选择" @change="fillTransfer()">
      <el-option v-for="item in moduleList" :key="item.id" :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    </el-row>

    <el-row class="transfer">
      <el-transfer v-model="tasks" :data="taskList"
        :titles="['可选任务', '必选任务']" >
      </el-transfer>
    </el-row>

    <el-row>
      <el-button type="primary" @click="save()">保存</el-button>
    </el-row>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        org: '',
        orgList: [],
        module: '',
        moduleList: [
          {id: '1', name: '人工智能基础知识'},
          {id: '2', name: '人工智能之场景应用'},
          {id: '3', name: '人工智能之未来'}
        ],
        tasks: [],
        taskList: []
      }
    },
    activated () {
      this.getOrgList()
    },
    methods: {
      // 获取数据列表
      getOrgList () {
        this.$http({
          url: '/sys/org/queryAll',
          method: 'get',
          params: {
            'parentNo': '01'
          }
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.orgList = data.list
          }
        })
      },

      fillTransfer () {
        if (!this.org || !this.module) {
          return
        }

        this.tasks = []
        this.taskList = []

        // 获取所选模块下所有的任务
        this.$http({
          url: '/sys/jmcourse/queryAll',
          method: 'get',
          params: {
            'module': this.module
          }
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            for (let i = 0; i < data.list.length; i++) {
              this.taskList.push({key: data.list[i].id, label: data.list[i].courseName})
            }
          }
        })

        // 获取所选专业对应所选模块的必选任务
        this.$http({
          url: '/sys/jmcourseorg/queryAll',
          method: 'get',
          params: {
            'org': this.org,
            'module': this.module
          }
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            for (let i = 0; i < data.list.length; i++) {
              this.tasks.push(data.list[i].courseId)
            }
          }
        })
      },

      save () {
        if (!this.org || !this.module) {
          return
        }

        this.$http({
          url: '/sys/jmcourseorg/saveAll',
          method: 'post',
          data: {
            'org': this.org,
            'module': this.module,
            'tasks': this.tasks
          }
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '保存成功',
              type: 'success',
              duration: 1500
            })
          }
        })
      }
    }
  }
</script>

<style>
  .transfer{
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .el-transfer-panel{
    width: 300px;
  }

</style>
